{% extends 'layout.html' %}

{% block content %}
<div class="container-fluid mt-3">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>超市购物车</title>
        <script src="https://cdn.tailwindcss.com"></script>
        <style>
           .receipt-scroll {
                scrollbar-width: thin;
                scrollbar-color: #6b7280 #e5e7eb;
            }
           .receipt-scroll::-webkit-scrollbar {
                width: 6px;
            }
           .receipt-scroll::-webkit-scrollbar-track {
                background: #e5e7eb;
            }
           .receipt-scroll::-webkit-scrollbar-thumb {
                background-color: #6b7280;
                border-radius: 3px;
            }
           .product-row:hover {
                background-color: #f3f4f6;
            }
           .cart-container {
                width: 100%;
                max-width: 800px;
                margin: 0 auto;
            }
        </style>
    </head>
    <body class="bg-gray-100 font-sans">
        <div class="min-h-screen flex justify-center items-center">
            <div class="cart-container bg-white rounded-lg shadow-md p-4">
                <h1 class="text-2xl font-bold text-gray-800 mb-4 text-center">购物车</h1>

                <div id="scannedProducts" class="overflow-y-auto receipt-scroll">
                    <div class="border-b border-gray-200 py-2 grid grid-cols-12 font-semibold text-gray-600 text-sm">
                        <div class="col-span-3">商品名称</div>
                        <div class="col-span-2 text-center">单价(元)</div>
                        <div class="col-span-3 text-center">数量</div>
                        <div class="col-span-2 text-center">折扣</div>
                        <div class="col-span-2 text-center">小计(元)</div>
                    </div>
                    {% for item in cart_items %}
                    <div class="product-row border-b border-gray-200 py-2 grid grid-cols-12 text-sm">
                        <div class="col-span-3 font-medium">{{ item.name }}</div>
                        <div class="col-span-2 text-center">¥{{ item.price|floatformat:2 }}</div>
                        <div class="col-span-3 flex items-center justify-center">
                            <button class="quantity-btn decrease w-6 h-6 rounded-l bg-gray-200 hover:bg-gray-300" data-id="{{ item.id }}">-</button>
                            <span class="quantity w-10 text-center border-t border-b border-gray-200">{{ item.quantity }}</span>
                            <button class="quantity-btn increase w-6 h-6 rounded-r bg-gray-200 hover:bg-gray-300" data-id="{{ item.id }}">+</button>
                        </div>
                        <div class="col-span-2 text-center text-red-500">{% if item.discount > 0 %}-¥{{ item.discount|floatformat:2 }}{% else %}-{% endif %}</div>
                        <div class="col-span-2 text-center font-medium">¥{{ item.subtotal|floatformat:2 }}</div>
                    </div>
                    {% endfor %}
                </div>

                <div class="bg-gray-100 p-3 rounded-md mt-4 text-sm">
                    <div class="flex justify-between py-1">
                        <span class="text-gray-600">商品总数:</span>
                        <span id="totalQuantity" class="font-semibold">{{ total_quantity }}</span>
                    </div>
                    <div class="flex justify-between py-1">
                        <span class="text-gray-600">总金额:</span>
                        <span id="totalAmount" class="font-semibold">¥{{ total_amount|floatformat:2 }}</span>
                    </div>
                    <div class="flex justify-between py-1">
                        <span class="text-gray-600">折扣合计:</span>
                        <span id="totalDiscount" class="font-semibold text-red-500">-¥{{ total_discount|floatformat:2 }}</span>
                    </div>
                    <div class="flex justify-between py-1 border-t border-gray-200 mt-2 pt-2">
                        <span class="text-gray-800 font-bold">应付金额:</span>
                        <span id="payableAmount" class="font-bold text-xl text-blue-600">¥{{ payable_amount|floatformat:2 }}</span>
                    </div>
                </div>

                <div class="flex space-x-3 justify-center mt-4">
                    <button id="clearBtn" class="flex-1 bg-red-100 text-red-800 py-3 rounded-md hover:bg-red-200">
                        清空购物车
                    </button>
                    <a href="{% url 'checkout' %}" class="flex-1 bg-blue-600 text-white py-3 rounded-md hover:bg-blue-700">
                        前往结算
                    </a>
                </div>

                <script>
                    document.addEventListener('DOMContentLoaded', function () {
                        // 数量增减按钮事件监听
                        const decreaseButtons = document.querySelectorAll('.quantity-btn.decrease');
                        decreaseButtons.forEach(btn => {
                            btn.addEventListener('click', function () {
                                const productId = this.dataset.id;
                                // 发送 AJAX 请求减少数量
                                fetch(`/cart/update_quantity/${productId}/decrease/`, {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'X-CSRFToken': '{{ csrf_token }}'
                                    }
                                })
                               .then(response => response.json())
                               .then(data => {
                                    if (data.success) {
                                        location.reload();
                                    } else {
                                        alert(data.message);
                                    }
                                });
                            });
                        });

                        const increaseButtons = document.querySelectorAll('.quantity-btn.increase');
                        increaseButtons.forEach(btn => {
                            btn.addEventListener('click', function () {
                                const productId = this.dataset.id;
                                // 发送 AJAX 请求增加数量
                                fetch(`/cart/update_quantity/${productId}/increase/`, {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'X-CSRFToken': '{{ csrf_token }}'
                                    }
                                })
                               .then(response => response.json())
                               .then(data => {
                                    if (data.success) {
                                        location.reload();
                                    } else {
                                        alert(data.message);
                                    }
                                });
                            });
                        });

                        document.getElementById('clearBtn').addEventListener('click', function () {
                            if (confirm('确定要清空当前购物车吗？')) {
                                // 发送 AJAX 请求清空购物车
                                fetch('/cart/clear/', {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'X-CSRFToken': '{{ csrf_token }}'
                                    }
                                })
                               .then(response => response.json())
                               .then(data => {
                                    if (data.success) {
                                        location.reload();
                                    } else {
                                        alert(data.message);
                                    }
                                });
                            }
                        });
                    });
                </script>
            </div>
        </div>
    </body>
{% endblock %}